<!--
 * @Date: 2023-01-10 11:50:02
 * @LastEditTime: 2023-03-26 19:56:35
 * @FilePath: /hash-guess-game/src/views/myCenter/myCenter.vue
 * 介绍:首页
-->
<script lang="ts" setup>
import { _require } from "@@/utils/tools/tools";
import Avater from "@@/components/rework/Avater/Avater.vue";
import CardGlass from "@@/components/CardGlass/CardGlass.vue";
import { addCache } from "@@/hooks/routeCache";
import toast from "@@/components/rework/toast";
import { t } from "@@/hooks/useI18n";
import useUserInfoStore from "@@/store/useUserInfoStore";
import { copyText } from "@@/utils/tools/project";
const userInfoStore = useUserInfoStore();
userInfoStore.getUserInfo();
onActivated(userInfoStore.getUserInfo);

addCache("club");

const { t: $t } = useI18n();
const fastNavigation = [
  {
    src: _require("src/assets/iconSvg/fen-xiang.svg"),
    title: t("kuai-su-lian-jie"),
    onClick: () => {
      toast.text($t("zan-wei-kai-qi"));
      // copyText(
      //   `${window.location.origin}/#/?invit=${userInfoStore.userInfo?.invit}`
      // );
    },
  },
  {
    src: _require("src/assets/iconSvg/she-zhi.svg"),
    title: t("she-zhi"),
    onClick: () => {
      toast.text($t("zan-wei-kai-qi"));
    },
  },
];
</script>

<template>
  <div class="meCenter">
    <Mimage
      :src="_require('src/assets/img/myCenter/big-saiche.png')"
      height="300rem"
      :fit="'cover'"
    >
    </Mimage>
    <!-- 用户信息 -->
    <div class="meCenter_content">
      <div class="skewing-box flex-A-C auto-ml">
        <Avater :src="_require('src/assets/img/home/qi-che.png')" />
        <div class="auto-mt">
          <div>{{ userInfoStore.userInfo?.name }}</div>
          <div>
            <span>LV : </span>
            <span style="color: var(--C-M2)">
              {{ userInfoStore.userInfo?.level }}</span
            >
          </div>
        </div>
      </div>
      <!-- 快速导航 -->
      <div class="fast-navigation">
        <CardGlass
          @click="item.onClick"
          v-for="item in fastNavigation"
          class="active"
        >
          <div class="CardGlass_content flex-A-C flex-J-C auto-ml">
            <Mimage height="34rem" :src="item.src" />
            <div>{{ $t(item.title) }}</div>
          </div>
        </CardGlass>
      </div>
      <!-- banner -->
      <Mimage
        class="banner"
        width="var(--page-content-W)"
        :src="_require('src/assets/img/myCenter/sai-che-zhuang-ji.png')"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.meCenter {
  background-color: var(--C-B2);
}
.meCenter_content {
  background-color: var(--C-B1);
  min-height: calc(100vh - var(--nav-H) - 300rem);
  margin: 0 calc(0rem - var(--gap-md));
  margin-bottom: calc(0rem - var(--tabbar-H));
  border-radius: 28rem 28rem 0 0;
  padding: 0 var(--gap-md);
  .skewing-box {
    transform: translateY(-25%);
  }
}
.Avater {
  border: var(--C-T1) solid 4rem;
}
.fast-navigation {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-md);
  .CardGlass :deep(.CardGlass_box) {
    border-radius: 999rem;
  }
  .CardGlass_content {
    padding: 10rem 0;
  }
}
.banner {
  margin-top: var(--gap-lg);
}
</style>
